<template>
	<view>
		<uv-sticky bgColor="#fff">
			<view class="padding-lr padding-top bg-white">
				<view class="search-box padding-sm text-center">
					<uv-input type="text" border="none" placeholder="搜索" placeholderClass="text-center" clearable
						v-model="title" @input="btnClick">
						<!-- <template v-slot:suffix>
							<uv-button @click="loadList" text="查询" type="success" size="mini"></uv-button>
						</template> -->
					</uv-input>
					<!-- <template>
						<text class="cuIcon-search"></text>
						<text class="margin-left-sm">搜索</text>
					</template> -->
				</view>
				<uv-tabs lineColor="#0BCA89" :list="categoryOpt" :scrollable="false" @click="onClick"></uv-tabs>
			</view>
		</uv-sticky>
		<scroll-view class="list-box" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="100" refresher-background="#f1f1f1" :lower-threshold="40"
			@scrolltolower="onScrolltolower" @refresherrefresh="onRefresh">
			<view class="padding bg-white solid-bottom" v-for="(item, index) in dataList" :key="index"
				@click="handleDetail(item)">
				<view class="flex">
					<view class="flex-sub flex flex-direction justify-between">
						<view class="w-100 text-black text-lg uni-ellipsis-2">
							{{item.title}}
						</view>
						<view class="text-gray margin-top-sm">
							<text>{{item.cropType || '-'}}</text>
							<text class="margin-left">{{item.createTime}}</text>
						</view>
					</view>
					<view class="margin-left-xs ">
						<!-- <image class="radius-lg" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg"
							mode="aspectFill" style="width: 200rpx;height: 140rpx;"></image> -->
					</view>
				</view>
			</view>
		</scroll-view>
		<TabBar current="baike"></TabBar>
	</view>
</template>

<script>
	import TabBar from '@/components/tabBar/index.vue'
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				formData: {
					status: 'loading', // 加载状态
				},
				tipShow: false, // 是否显示顶部提示框
				data: [],
				loading: false,
				dataList: [],
				typeStatus: null,
				triggered: false,
				finish: false,
				pageNum: 1,
				title: '',
				titleCategory: '1',
				categoryOpt: []
			};
		},
		onLoad() {
			// 获取栏目agricultural_encyclopedia_title_category=栏目分类字典
			uni.$uv.http.get('/system/dict/data/type/agricultural_encyclopedia_title_category').then(res => {
				this.categoryOpt = res.data.map(item => ({
					name: item.dictLabel,
					label: item.dictLabel,
					value: item.dictValue
				}))
			})
			this.loadList()
		},
		methods: {
			onClick(item) {
				console.log('item', item);
				this.titleCategory = item.value
				this.loadList()
			},
			handleDetail(item) {
				uni.$uv.route({
					url: '/subPages/pages/baikeDetail/index',
					params: {
						id: item.id,
					}
				})
			},
			onRefresh() {
				this.triggered = true
				this.finish = false;
				this.pageNum = 1;
				this.loadList();
			},
			onScrolltolower() {
				if (this.loading) return;
				if (this.finish) return;
				this.pageNum++;
				this.loadList();
			},
			btnClick(v) {
				console.log(v)
				uni.$uv.debounce(this.loadList, 500)
			},
			loadList() {
				this.loading = true;
				this.$http
					.get(
						"/cadre/agricultural/listApp/1/10", {
							params: {
								title: this.title,
								titleCategory: this.titleCategory
							}
						}
					)
					.then((res) => {
						this.loading = false;
						if (this.pageNum === 1) {
							this.dataList = res.data.records;
						} else {
							this.dataList = [...this.dataList, ...res.data.records];
						}

						if (this.dataList.length == res.data.total) {
							this.finish = true;
						}
						this.triggered = false;
					})
					.catch((err) => {
						this.triggered = false;
						console.log("err", err);
					});
			}
		},
	};
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.search-box {
		background: #F3F4F5;
		border-radius: 30rpx;
	}

	.list-box {
		height: calc(100vh - 190px);
		padding: 20rpx 0;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>